<template>
  <el-card class="childLeft-box-card">
    <div style="text-align: center">
      <img src="../../assets/img/child_header_nan.png" alt="" v-if="formInline.sex =='男'">
      <img src="../../assets/img/child_header_nv.png" alt="" v-else-if="formInline.sex =='女'">
      <p>{{ formInline.name }}</p>
    </div>
    <ul>
      <li><span class="titles">姓名 </span><span> {{ formInline.name }}</span> </li>
      <li><span class="titles">生日 </span><span> {{ formInline.birthday }}</span></li>
      <li><span class="titles">身高 </span><span> {{ formInline.height }}CM</span></li>
      <li><span class="titles">体重 </span><span> {{ formInline.weight }}KG</span></li>
      <li><span class="titles">民族 </span><span> {{ formInline.nation }}</span> </li>
      <li><span class="titles">联系电话 </span><span> {{ formInline.mobile }}</span> </li>
      <li><span class="titles">年龄 </span><span> {{ formInline.age }}岁</span></li>
    </ul>
  </el-card>

</template>

<script setup>
import {defineComponent, onMounted, ref, watch, reactive} from 'vue'
import {useRoute, useRouter} from "vue-router"
import http from "../../utils/http";
import {ElMessage} from "element-plus";
const formInline = ref({})
const id = ref()
const groupId = ref()
const route = useRoute()
const router = useRouter()

const fetchData = async () => {
  if(route.params.groupId) {
    id.value = route.params.id;
    groupId.value = route.params.groupId;
    http.get('api/Chronic/ChronicInfo?id='+ id.value).then((res)=>{
      if(res.data.code === 1) {
        res.data.data.id = id
        formInline.value = res.data.data

      } else {
        ElMessage.error('数据获取失败')
        router.push({'path': '/ChronicList/' + groupId.value})
      }
    })
  } else {
    ElMessage.error('栏目编号不得为空')
    await router.push({'path': '/Home'})
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style>

.childLeft-box-card {
  float: left;
  margin-left: 6%;
  margin-top: 1%;
  position: static;
  top: calc(260px);
  left: calc(65%);
  width: 20%;
  height: 650px;
  border-radius: 3%;
  font-size: 16px;
}

.childLeft-box-card ul {
  width: 100%;
}

.childLeft-box-card .titles {
  margin-right: 20px;
  color: #ccc;
}
.childLeft-box-card ul li{
  line-height: 70px;
  height: 70px;
  list-style-type: none;
  width: 100%;
  display: flex;
}
.childLeft-box-card ul li span{
  flex: 0.4;
  text-align: left;
}
.childLeft-box-card ul li span:first-child{
  text-align: right;
}
</style>
